import { View, Text, Image, Input } from "@tarojs/components";
import { Component, ReactNode } from "react";
import i1 from "./images/i1.png";
import i5 from "./images/i5.png";
import i4 from "./images/i4.png";
import "./index.scss";
import { AtButton } from "taro-ui";
import Req from "../../utils/request";
import { isEmpty } from "../../utils/kit";
import { setToken, setInfo } from "../../utils/auth";
import Taro from "@tarojs/taro";
export default class Login extends Component {
  state = {
    phone: "",
    code: "",

    countDown: 0,
    isCounting: false,
  };
  onSubmit = () => {
    const { phone, code } = this.state;
    if (isEmpty(phone)) {
      Taro.showToast({
        title: "手机号不能为空！",
        icon: "none",
        duration: 2000,
      });
      return false;
    }
    if (isEmpty(code)) {
      Taro.showToast({
        title: "验证码不能为空！",
        icon: "none",
        duration: 2000,
      });
      return false;
    }
    Req.post(
      "/phoneLogin",
      {
        phone,
        code,
      },
      {
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
      }
    )
      .then((r) => {
        if (r.code === 200) {
          setToken(r.token);
          Req.get("/getInfo").then((r) => {
            setInfo({
              ...r.user,
              company: r.company,
            });
            Taro.switchTab({
              url: "/pages/index/index",
            });
          });
        }
      })
      .catch((e) => {
        console.log("eee", e);
      });
  };

  _startCountdown = (countDown: number) => {
    const { isCounting, phone } = this.state;
    if (isCounting) return;
    Req.get("/sendCode", {
      phone,
    })
      .then((r) => {
        if (r.code === 200) {
          Taro.showToast({
            title: "发送成功！",
            icon: "none",
            duration: 2000,
          });
          this.setState({
            isCounting: true,
            countDown: countDown,
          });
        }
      })
      .catch((e) => {});
  };
  componentDidUpdate() {
    const { isCounting, countDown } = this.state;
    let timer;
    if (isCounting && countDown > 0) {
      timer = setTimeout(() => {
        this.setState({
          countDown: countDown - 1,
        });
      }, 1000);
    } else if (countDown === 0) {
      if (timer) {
        clearTimeout(timer);
      }
      if (isCounting) {
        this.setState({
          isCounting: false,
        });
      }
    }
  }
  sendCode = () => {
    const { phone } = this.state;
    if (isEmpty(phone)) {
      Taro.showToast({
        title: "请先输入手机号！",
        icon: "none",
        duration: 2000,
      });
      return false;
    }
    this._startCountdown(60);
  };
  render(): ReactNode {
    const { phone, code, isCounting, countDown } = this.state;
    return (
      <View className="login-container">
        <View className="login-form">
          <View className="login-form-item">
            <Image className="login-form-item-i1" src={i4} />
            <View className="login-form-item-v1">
              <Input
                value={phone}
                onInput={(v) => {
                  this.setState({
                    phone: v.detail.value,
                  });
                }}
                type="number"
                className="login-form-item-input"
              />
              <Image className="login-form-item-i2" src={i1} />
            </View>
          </View>
          <View className="login-form-item">
            <Image className="login-form-item-i1 login-form-item-i3" src={i5} />
            <View className="login-form-item-v1">
              <Input
                value={code}
                onInput={(v) => {
                  this.setState({
                    code: v.detail.value,
                  });
                }}
                type="number"
                className="login-form-item-input code-input"
              />
              <Text onClick={this.sendCode} className="send-code-text">
                {isCounting ? `${countDown}秒后重新获取` : "发送验证码"}
              </Text>
            </View>
          </View>
          <AtButton
            circle
            className="login-btn primary-btn-color"
            type="primary"
            onClick={this.onSubmit}
          >
            登录
          </AtButton>
        </View>
      </View>
    );
  }
}
